<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                        <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                        <td class="goods"><img src="images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                        <td class="price">5999.88</td>
                        <td class="count"><span class="reduce"></span>
                            <input class="count-input" type="text" value="1" />
                            <span class="add">+</span></td>
                        <td class="subtotal">5999.88</td>
                        <td class="operation"><span class="delete">删除</span></td>
                    </tr>
                    <tr>
                        <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                        <td class="goods"><img src="images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
                        <td class="price">3888.50</td>
                        <td class="count"><span class="reduce"></span>
                            <input class="count-input" type="text" value="1" />
                            <span class="add">+</span></td>
                        <td class="subtotal">3888.50</td>
                        <td class="operation"><span class="delete">删除</span></td>
                    </tr>
                    <tr>
                        <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                        <td class="goods"><img src="images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
                        <td class="price">1428.50</td>
                        <td class="count"><span class="reduce"></span>
                            <input class="count-input" type="text" value="1" />
                            <span class="add">+</span></td>
                        <td class="subtotal">1428.50</td>
                        <td class="operation"><span class="delete">删除</span></td>
                    </tr>
                    <tr>
                        <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                        <td class="goods"><img src="images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
                        <td class="price">640.60</td>
                        <td class="count"><span class="reduce"></span>
                            <input class="count-input" type="text" value="1" />
                            <span class="add">+</span></td>
                        <td class="subtotal">640.60</td>
                        <td class="operation"><span class="delete">删除</span></td>
                    </tr> -->
            </tbody>
        </table>
        <div class="foot" id="foot">

            <a class="fl" id="deleteAll" href="javascript:;">删除</a>
            <div class="fr closing" onclick="getTotal();">结 算</div>
            <input type="hidden" id="cartTotalPrice" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="images/1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>
    </div>
</body>
<script>
    var tbody = document.querySelector("tbody");

    // ajax 
    // req.readyState  请求状态
    var req = new XMLHttpRequest();  // 创建请求对象  目的（建立TCP链接）
    // req.readyState   0


    req.open("get", "data/data.json", true);
    // req.readyState   1

    req.send(); // 请求行 请求头 空行 请求数据
    // req.readyState   1

    // 监听请求状态(req.readyState )的变化
    req.onreadystatechange = function () {
        // 2  加载成功  服务器 接受请求头(request header) 
        // 3  交互      服务器 接受请求数据()
        // 4  完成      服务器返回内容 (状态行(返回状态 http 状态码（100-500） 响应头 空行  响应数据 ));
        if (req.readyState == 4 && req.status == 200) {  //  req.status  服务器响应状态行

            // req.responseText   返回响应数据(string)
            var result = req.responseText;  //string
            // console.log(result);
            var data = JSON.parse(result);
            // console.log(data);
            console.log("我是ajax的请求");
            html = "";
            // data.forEach(function(item){})
            data.forEach((item) => {
                console.log(item);
                var { goodsId, goodsName, goodsImg, goodsNum, goodsPrice } = item; //对象的解构赋值
                // console.log(goodsId, goodsName, goodsImg, goodsNum, goodsPrice);

                html += `<tr product="${goodsId}">
                        <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                        <td class="goods"><img src="${goodsImg}" alt="" /><span>${goodsName}</span></td>
                        <td class="price">${(goodsPrice * 1).toFixed(2)}</td>
                        <td class="count"><span class="reduce">${goodsNum > 1 ? "-" : ""}</span>
                            <input class="count-input" type="text" value="${goodsNum}" />
                            <span class="add">+</span></td>
                        <td class="subtotal">${(goodsPrice * goodsNum).toFixed(2)}</td>
                        <td class="operation"><span class="delete">删除</span></td>
                    </tr>`;

            })
            tbody.innerHTML = html;



        }
    }
    console.log("我是加载的代码");
    // tbody.innerHTML = html;


</script>

</html>